{extend name="extra@admin/content"}

{block name="content"}
<form onsubmit="return false;" action="__SELF__" data-auto="true" method="post" class='form-horizontal' style='padding-top:20px'>

    <div class="form-group">
        <label class="col-sm-2 control-label">公司名称 <span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <input type="text" name="name" required="required" title="请输入公司名称" placeholder="请输入公司名称"
                   value="{$data.name}" class="layui-input">
            <p class="help-block">公司名称，显示在网站首页标签上</p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">公司logo <span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <img data-tips-image style="height:auto;max-height:100px;min-width:100px" src="{$data.logo}"/>
            <input type="hidden" name="logo" onchange="$(this).prev('img').attr('src', this.value)"
                   value="{$data.logo}" class="layui-input">
            <a class="btn btn-link" data-file="one" data-type="ico,png" data-field="logo">上传图片</a>
            <p>建议上传Logo图标的尺寸为512x512px。</p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">公司联系电话 <span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <input type="text" name="phone"  title="请输入公司联系电话" placeholder="请输入公司联系电话"
                   value="{$data.phone}" class="layui-input">
            <p class="help-block">公司联系电话</p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">公司联系地址 <span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <input type="text" name="addr"  title="请输入公司联系地址" placeholder="请输入公司联系地址"
                   value="{$data.addr}" class="layui-input">
            <p class="help-block">公司联系地址</p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">公司简介 <span class="nowrap"></span></label>
        <div class='col-sm-8'>
            <textarea name='info'>{$data.info}</textarea>
            <p class="help-block">公司简介，显示在网站首页上</p>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-sm-4 col-sm-offset-2">
        {if isset($data['id'])}<input type='hidden' value='{$data.id}' name='id'/>{/if}
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit">保存信息</button>
        </div>
    </div>

</form>

{/block}

{block name='script'}
<script>
    $(function () {

        $('body').on('change', '.upload-image-box input', function () {
            $('.news-item.active').css('background-image', 'url(' + this.value + ')');
            $(this).parent('.upload-image-box').css('background-image', 'url(' + this.value + ')');
        });

        require(['ueditor'], function () {

            /*! 实例富文本编辑器  */
            var editor, $item;

            /*! 默认编辑第一篇图文 */
            editor = window.createEditor('[name="info"]', 'basic');

            /*! 编辑器初始化成功 */
            editor.ready(function () {

                var $form = $('form[name="news"]'), $body = $('body');

                $form.validate();

                /*! 数据提交 */
                $form.find('button[data-submit]').on('click', function () {
                    var data = [];
                    $form.submit();
                    if (!syncEditor($('.news-item.active'))) {
                        editor.setContent('文章内容不能留空，请输入内容！');
                        return false;
                    }
                    $('.news-item').map(function () {
                        var item = $(this).data('item');
                        item.content = item.content || '文章内容不能留空，请输入内容！';
                        data.push(item);
                    });
                    $.form.load('__SELF__', {data: data}, "post");
                });

                /*! 输入标题显示 */
                $form.find('[name="title"]').on('keyup', function () {
                    if ($item) {
                        $item.find('.news-title').html(this.value).show();
                    }
                });

                /*! 同步编辑器 */
                function syncEditor($pItem) {
                    // 处理上一个编辑器
                    if ($form && $pItem && $pItem.size() > 0) {
                        var data = {};
                        data.id = $form.find('[name=id]').val();
                        data.title = $form.find('[name=title]').val();
                        data.local_url = $form.find('[name=local_url]').val();
                        data.content = editor.getContent() || '';
                        data.author = $form.find('[name=author]').val();
                        data.digest = $form.find('[name=digest]').val();
                        data.show_cover_pic = $form.find('[name="show_cover_pic"]').get(0).checked ? 1 : 0;
                        $form.find('[name=local_url]').trigger('change');
                        $pItem.data('item', data), $form.submit();
                        if ($form.find('input.validate-error').size() > 0 || data.content.length < 1) {
                            ((data.content || '').length < 1) && editor.setContent('文章内容不能留空，请输入内容！');
                            $pItem.addClass('active').siblings().removeClass('active');
                            return false;
                        }
                    }
                    return true;
                }

                /*! 显示编辑器 */
                function showEditor() {
                    // 读取对象数据
                    $item = $('.news-item.active');
                    this.get = function () {
                        var data = $item.data('item') || {};
                        data.id = data.id || 0;
                        data.title = data.title || '';
                        data.local_url = data.local_url || '__PUBLIC__/static/plugs/uploader/theme/image.png';
                        data.content = data.content || '';
                        data.author = data.author || '';
                        data.digest = data.digest || '';
                        data.show_cover_pic = data.show_cover_pic || 0;
                        return data;
                    };
                    // 重置表单
                    $form.get(0).reset();
                    // 获取当前数据
                    var data = this.get();
                    for (var i in data) {
                        if (i !== 'content' && i !== 'show_cover_pic') {
                            $form.find('[name="' + i + '"]').val(data[i]).trigger('change');
                        }
                    }
                    if (parseInt(data.show_cover_pic) === 1) {
                        $form.find('[name="show_cover_pic"]').get(0).checked = true;
                    }
                    editor.setContent(data.content);
                }

                /*! 添加新图文 */
                $body.off('click', '.news-box .article-add').on('click', '.news-box .article-add', function () {
                    var $html = $('<div class="news-item transition" style="background-image:url(__PUBLIC__/static/plugs/uploader/theme/image.png)"><a class="upload-multiple-close fa fa-close hide"></a><span class="news-title"></span></div><hr />');
                    $html.insertBefore(this).trigger('click');
                    $('.news-item').size() >= 7 && $(this).hide();
                });

                /*! 列表选择 */
                $body.off('click', '.news-item').on('click', '.news-item', function () {
                    if (syncEditor($('.news-item.active'))) {
                        $(this).addClass('active').siblings().removeClass('active');
                        showEditor($item);
                    }
                });

                /*! 隐藏删除按钮 */
                $body.off('mouseleave').on('mouseleave', '.news-item', function () {
                    $(this).find('.upload-multiple-close').addClass('hide');
                });

                /*! 显示删除按钮 */
                $body.off('mouseenter', '.news-item').on('mouseenter', '.news-item', function () {
                    $('.upload-multiple-close').addClass('hide');
                    $(this).find('.upload-multiple-close').removeClass('hide');
                });

                /*! 删除操作图文 */
                $body.off('click', '.upload-multiple-close').on('click', '.upload-multiple-close', function () {
                    var $box = $(this).parents('.news-item');
                    $box.add($box.next('hr')).remove();
                    $('.news-item').size() < 7 && $('.news-box .article-add').show();
                });

                /*! 默认显示第一个 */
                $('.news-box .news-item:first').trigger('click');
            });
        });
    });
</script>
{/block}